<?php $this->beginBlock('cssHeaderFile')?>
<link href="/static/plugins/mdeditor/css/editormd.min.css" rel="stylesheet">
<?php $this->endBlock()?>
<?php $this->beginBlock('cssHeaderText')?>
<style>
    .markdown-body ol, .markdown-body ul{
        padding-left: 0px;
    }
    .markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul{
        margin-bottom: 0px;
    }
</style>
<?php $this->endBlock()?>

<?php $this->beginBlock('pageTitle')?>
<a href="<?=\yii\helpers\Url::toRoute(['docs/index','projectId' => $projectId])?>" title="<?=isset($projectInfo['name']) ? $projectInfo['name'] : 'FankersDoc'?>" class="book-title">
    <?=isset($projectInfo['name']) ? $projectInfo['name'] : 'FankersDoc'?>
</a>
<?php $this->endBlock()?>

<article class="container-fluid manual-body">

    <div class="manual-right operate-right" style="left: 0px;">
        <div class="manual-article" id="editArticle">
            <div class="article-head">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="input-group">
                                <span class="input-group-addon">标题</span>
                                <input type="text" class="form-control" v-model="detail.page_title" placeholder="请输入标题">
                            </div>
                        </div>
                        <div class="col-md-2 text-left">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>二级分类</label>
                                    <select class="form-control" v-model="secondSelected">
                                        <option :value="defaultValue">请选择分类</option>
                                        <option  v-if="secondCate.length>0" v-for="(item,index) in secondCate" :value="item.id" v-text="item.name"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 text-left">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>三级分类</label>
                                    <select class="form-control" v-model="thirdSelected">
                                        <option :value="defaultValue">请选择分类</option>
                                        <option  v-if="thirdData.length>0" v-for="(item,index) in thirdData" :value="item.id" v-text="item.name"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 text-left">
                            <div class="input-group">
                                <span class="input-group-addon">序号</span>
                                <input type="text" class="form-control" v-model="detail.sort" placeholder="序号">
                            </div>
                        </div>

                        <div class="col-md-2 text-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" @click.stop="save()">保 存</button>
                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;">保存为草稿</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">取消保存</a></li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-default">取 消</button>

                        </div>
                    </div>
                </div>
            </div>
            <div class="article-content">
                <div class="article-body  markdown-body editormd-preview-container"  id="page-content">
                    <div id="editormd">
                        <textarea name="editormd-markdown-doc" style="display:none;" v-model="detail.content"></textarea>
                        <textarea name="editormd-html-code" style="display:none;" v-model="detail.content"></textarea>
                    </div>
                </div>

                <div class="jump-top">
                    <a href="javascript:;" class="view-backtop"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</article>
<div class="manual-progress"><b class="progress-bar"></b></div>
<?php $this->beginBlock('jsFooterFile')?>
<script type="text/javascript" src="/static/plugins/mdeditor/editormd.js"></script>
<?php $this->endBlock()?>
<?php $this->beginBlock('jsFooterText')?>
<script type="text/javascript">
$(function () {
    var vue = new Vue({
        el:'#editArticle',
        data:{
            defaultValue:'0',
            ajaxLock:false,
            thirdSelected:"<?=isset($detail['cate_id']) ? $detail['cate_id'] : '0'?>",
            secondSelected:"<?=isset($parentId) ? $parentId : '0'?>",
            detail:<?=!empty($detail) ? json_encode($detail,true) : '{}'?>,
            secondCate:<?=!empty($secondCate) ? json_encode($secondCate,true) : '{}'?>,
            thirdCate:<?=!empty($thirdCate) ? json_encode($thirdCate,true) : '{}'?>
        },

        computed:{
            thirdData:function () {
                return this.thirdCate[this.secondSelected];
            },
            saveJsonData:function () {

                this.detail.cate_id = this.thirdSelected;
                this.detail.project_id = <?=isset($projectId) ? $projectId : ''?>;
                this.detail.content = editor.getMarkdown();
                this.detail['<?=Yii::$app->request->csrfParam?>'] = "<?=Yii::$app->request->csrfToken?>";
                return this.detail;
            }
        },

        methods:{
            save:function () {
                that = this;
                if (that.ajaxLock)return false;
                $.ajax({
                    type:'post',
                    url:'<?=\yii\helpers\Url::toRoute(['docs/save'])?>',
                    data:that.saveJsonData,
                    dataType:'json',
                    success:function (resp) {

                        that.ajaxLock = false;
                        if (resp.e === '0'){
                            layer.msg(resp.m, {icon: 6});
                        } else {
                            layer.msg(resp.m, {icon: 5});
                        }
                    },
                    error:function () {
                        that.ajaxLock = false;
                        layer.msg("服务器正忙，请稍后重试", {icon: 5});
                    }
                });
            }
        }
    });

    // markdown编辑器
    var editor = editormd("editormd", {
        height: 600,
        path : "/static/plugins/mdeditor/lib/",
        title:'fankers'
    });
    editor.getMarkdown();       // 获取 Markdown 源码
    editor.getHTML();           // 获取 Textarea 保存的 HTML 源码

});
</script>
<?php $this->endBlock()?>
